<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
    <div>
        供暖号码：<input type="text" ref="heatingNumber" v-model.trim="ordersinfo.heatingNumber" @blur="findAddress">
        <span>{{error.heatingNumber}}</span>
        <br>
        地址：<input type="text" ref="heatingAddress"  v-model.trim="ordersinfo.address">
        <span>{{error.heatingAddress}}</span>
        <br>
        联系人姓名：<input type="text" ref="userName"  v-model.trim="userName">
        <span>{{error.userName}}</span>
        <br>
        联系方式：<input type="text" ref="phoneNumber"  v-model.trim="ordersinfo.phone">
        <span>{{error.phoneNumber}}</span>
        <br>
        故障类型：<select v-model="ordersinfo.faultTypeId">
        <option>请选择故障类型</option>
        <option v-for="findFaultType,index in findFaultType":value="findFaultType.id">{{findFaultType.title}}</option>

        </select>
        <br>
        故障描述：<textarea ref="heatingProblem" name="heatingProblem"   v-model.trim="ordersinfo.faultDescription"></textarea>
        <span>{{error.heatingProblem}}</span>
        <br>
        下单类型：
        <button @click="time(0)">今日即时订单</button><button @click="checkTimeZone">预约订单</button>
        <br>
        <select v-model="ordersinfo.Appointmentime" v-show="orderToday">
            <option v-for="findTimeZonePm,index in findTimeZonePm">{{findTimeZonePm}}</option>
        </select>

        <select v-model="ordersinfo.orderTime" v-show="order">
            <option @click="time(index)" v-for="findOrderDate,index in findOrderDate":value="findOrderDate.id">
                {{findOrderDate.value}}
            </option>
        </select>
        <select v-model="orderTimeZone" v-show="order">
            <option v-for="findTimeZone,index in findTimeZone">{{findTimeZone}}</option>
        </select>
        
        <P v-model="dateTime" v-show="theDate">{{ordersTime}}</P>
<!--        <br>-->
        <span v-show="Confirm">{{orderConfirm}}</span>

        <br>
        下单日期：
        <div v-bind="ordersinfo.date"></div>

        <br>
        <button @click="save">提交</button>
    </div>
</div>
</body>
</html>
<script>
    var theDate = new Date();
    var seperator = "-";
    var app = new Vue({
        el: "#app",
        data: {
            now: true,
            orderTime: true, //下单的日期
            timeZonePm:false,//下午工作时间段
            theDate:false,//当前日期
            Confirm:false,//下单提示信息
            orderToday:false,//今日下午预约订单的时间段
            orderTimeZone:'',
            userName:'',
            // timeZoneAm: false,//间隔时间上午是否显示
            // timeZonePm: false,//间隔时间下午是否显示
            order:false,//预约订单是否显示
            findFaultType:[],//故障分类
            // findTimeZoneAm:[],//间隔时间上午
            // findTimeZonePm:[],//间隔时间下午
            findOrderDate:[],//今日明日后日
            findTimeZone:[],
            findTimeZonePm:[],
            workTime:'',
            orderConfirm: '',//下单提示信息
            ordersTime: '',//下单时间
            ordersinfo:{},//下单信息



            secletDateAddNumber: {},//根据当前日期增加的天数
            error: {                  //信息提交错误的提示信息
                heatingNumber: '',
                heatingAddress: '',
                userName: '',
                phoneNumber: '',
                heatingProblem: ''

            },
            //默认当前日期
            date: {
                year: theDate.getFullYear(),
                month: theDate.getMonth(),
                day: theDate.getDate(),
                hour: theDate.getHours(),
                min:theDate.getMinutes(),
                sec:theDate.getSeconds()
            }
        },
        created: function () {
            //初始化月份数列
            this.initData();
            this.initFindFaultType();
            // this.initTimeZoneAm();
            // this.initTimeZonePm();
            this.initOrderDate();
            this.initTimeZone();
        },
        methods: {
            initData: function () {
                //大月的月份
                this.oddMonth = [1, 3, 5, 7, 8, 10, 12];
                //小月月份
                this.lesserMonth = [4, 5, 6, 11];
            },
            initTimeZone: function () {
                axios.post("http://localhost:8080/userOrder/findWorkTime")
                    .then(res => {
                        console.log(res.data.data);
                        this.findTimeZone = res.data.data;
                    });
                axios.post("http://localhost:8080/userOrder/findWorkTimePm")
                    .then(res => {
                        console.log(res.data.data);
                        this.findTimeZonePm = res.data.data;
                    });

            },

            //生成今日，明日，后日

            initOrderDate: function () {
                //

                axios.post("http://localhost:8080/userOrder/findOrderDate")
                    .then(res => {
                        console.log(res.data.data);
                        this.findOrderDate = res.data.data;
                    });


            },
            //生成故障信息的下拉列表
            initFindFaultType: function () {
                axios.post("http://localhost:8080/userOrder/findFaultType")
                    .then(res => {
                        console.log(res.data.data);
                        this.findFaultType = res.data.data;
                    });
            },
            checkTimeZone:function(){
                this.order=true;
                this.Confirm=false;
            },
            //上传下单信息
            save: function () {
                var phn = /^1[0-9]{10}$/;
                if (this.ordersinfo.heatingNumber == undefined || this.ordersinfo.heatingNumber == "") {
                    this.error.heatingNumber = "请输入供暖号码";
                    this.$refs.heatingNumber.focus();
                    return;
                } else {
                    this.error.heatingNumber = "";
                }
                if (this.ordersinfo.address == undefined || this.ordersinfo.address == "") {
                    this.error.heatingAddress = "请输入供暖地址";
                    this.$refs.heatingAddress.focus();
                    return;
                } else {
                    this.error.heatingAddress = "";
                }
                if (this.userName == undefined || this.userName == "") {
                    this.error.userName = "请输入用户名";
                    this.$refs.userName.focus();
                    return;
                } else {
                    this.error.userName = "";
                }
                if (this.ordersinfo.phone == undefined || this.ordersinfo.phone == "") {
                    this.error.phoneNumber = "请输入联系方式";
                    this.$refs.phoneNumber.focus();
                    return;
                } else if (!phn.test(this.ordersinfo.phone)) {
                    this.error.phoneNumber = "请输入正确的联系方式";
                    this.$refs.phoneNumber.focus();
                    return;
                } else {
                    this.error.phoneNumber = "";
                }
                if (this.ordersinfo.faultDescription == undefined || this.ordersinfo.faultDescription == "") {
                    this.error.heatingProblem = "请输入故障详细情况";
                    this.$refs.heatingProblem.focus();
                    return;
                } else {
                    this.error.heatingProblem = "";
                }
                console.log("123");
                // var timeZone=.split("-")

                axios.post("http://localhost:8080/userOrder/placeOrder?userName="+this.userName+"&orderTimeZone="+this.orderTimeZone+"&dateTime="+this.dateTime, this.ordersinfo)
                    .then(res => {
                        console.log(res.data);
                    });
            },
//            获取地址，输入供暖号码后查询地址并自动生成
            findAddress: function () {
                if (this.ordersinfo.heatingNumber == undefined || this.ordersinfo.heatingNumber == "") {
                    this.error.heatingNumber = "请输入供暖号码";
                    this.$refs.heatingNumber.focus();
                    return;
                } else {
                    this.error.heatingNumber = "";
                }
                axios.post("http://localhost:8080/userOrder/findAddress", this.ordersinfo)
                    .then(res => {
                        this.ordersinfo.address = res.data.data.address;
                    });
            },

            //下单日期
            time(index) {
                if (index == 0) {
                    this.secletDateAddNumber=0;
                    this.checkDay();
                    var hour = theDate.getHours();
                    if (hour >= 9 && hour < 12) {
                        this.orderConfirm = '可预约下午订单，也可下单今日即时订单';
                        this.timeZonePm = true;
                        this.orderToday=true;
                    } else if (hour >= 12 && hour < 18) {
                        this.orderConfirm = '可下单今日即时订单';
                        this.now = false;
                        this.orderToday=false;
                    } else {
                        this.orderConfirm = '可预约明后天订单，不可下单即时订单';
                        this.now = false;
                        this.orderTime = false;
                        this.orderToday=false;
                    }
                    if(this.date.month<10){
                        var currentDate = this.date.year + seperator + 1+this.date.month + seperator + this.date.day;
                        this.ordersTime = currentDate;
                    }
                    else{
                        var currentDate = this.date.year + seperator +this.date.month + seperator + this.date.day;
                        this.ordersTime = currentDate;
                    }


                    this.Confirm=true;
                    this.order=false;


                }
                if (index == 1) {
                    this.secletDateAddNumber = 1;
                    this.checkDay();
                    if(this.date.month<10){
                        var currentDate = this.date.year + seperator + 1+this.date.month + seperator + this.date.day;
                        this.ordersTime = currentDate;
                    }
                    else{
                        var currentDate = this.date.year + seperator +this.date.month + seperator + this.date.day;
                        this.ordersTime = currentDate;
                    }
                    this.orderConfirm = '';
                    this.Confirm=false;
                    this.timeZonePm = true;
                    this.orderToday=false;
                }
                this.ordersTime = currentDate;
                if (index == 2) {
                    this.secletDateAddNumber = 2;
                    this.checkDay();
                    if(this.date.month<10){
                        var currentDate = this.date.year + seperator + 1+this.date.month + seperator + this.date.day;
                        this.ordersTime = currentDate;
                    }
                    else{
                        var currentDate = this.date.year + seperator +this.date.month + seperator + this.date.day;
                        this.ordersTime = currentDate;
                    }
                    this.orderConfirm = '';
                    this.Confirm=false;
                    this.timeZonePm = true;
                    this.orderToday=false;
                }
            },

            //年份增加
            checkYear: function () {
                this.date.year = theDate.getFullYear() + 1;

            },
            //判断月份增加后是否溢出
            checkMonth: function () {
                //获取月份的值
                //月份+1后判断月份是否超过12
                //重新设定月份的值
                this.date = {
                    month: theDate.getMonth() + 1
                }
                if (this.date.month > 12) {
                    this.date.month = 1;
                    this.checkYear();
                } else {
                    this.date.month = this.date.month + 1;
                }

            },
            //判断日期增加是否溢出，溢出同时更改月份（年份）
            rightNow: function () {
                this.date = {
                    hour: theDate.getHours()
                }
                if (this.date.hour < 9 && this.date.hour > 18) {

                }
            },
            checkDay: function () {
                //获取当前系统时间
                this.date = {
                    year: theDate.getFullYear(),
                    month: theDate.getMonth() + 1,
                    day: theDate.getDate() + this.secletDateAddNumber
                };

                if (this.oddMonth.indexOf(this.date.month) && this.date.day > 31) {
                    this.date.day = this.date.day - 31;
                    this.checkMonth();
                }
                if (this.lesserMonth.indexOf(this.date.month) && this.date.day > 30) {
                    this.date.day = this.date.day - 30;
                    this.checkMonth();
                }
                if (this.date.year % 100 != 0 && this.date.year % 4 == 0 || this.date.year % 400 == 0) {
                    if (this.date.month = 2 && this.date.day > 29) {
                        this.date.day = this.date.day - 29;
                        this.checkMonth();
                    } else {
                        this.date.day = this.data.day - 28;
                        this.checkMonth();
                    }
                }
                console.log(this.date.day);
                //获取月份的值
                //判断是否为2月
                //判断月份是否存在于大月数列
                //修改日期
                //判断日期是否溢出，按需进行月份增加（按需进行年份增加）

            }
        }
    });
</script>